<template>
<!--html-->
<div id="home">
  <div class="wrap">
    <!--轮播开始-->
    <div class="shuffling">
      <mt-swipe :auto="3000">
        <mt-swipe-item v-for="list in now_all"><img :src="list.cover.origin" @click="send_id(list.id)" />
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <!--轮播结束-->
    <!--正在热映电影开始-->
    <div class="movie_box">
      <ul>
        <li v-for="list in now_all">
          <div class="movie">
            <div class="movie_img">
              <img :src="list.cover.origin" @click="send_id(list.id)" />
              <div class="movie_title">
                <div class="title">{{list.name}}</div>
                <div class="title_data">
                  <span>{{list.cinemaCount}}</span>
                  <span>家影院上映</span>
                  <span>{{list.watchCount}}</span>
                  <span>人购票</span>
                </div>
              </div>
            </div>
            <div class="score">
              <span>
									{{list.grade}}
								</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!--正在热映电影结束-->
    <!--更多-->
    <div class="more_button">
      <router-link to="/details/now_play" >更多热映电影</router-link>
    </div>
    <!--更多-->
    <div class="coming">
      <!--我是邪恶的分割线-->
      <div class="dividing-line">
        <div class="upcoming">
          即将上映
        </div>
      </div>
      <!--我是邪恶的分割线-->
      <!--即将上映电影开始-->
      <div class="coming_movie">
        <ul>
          <li v-for="item in com_all">
            <div class="com_movie">
              <div class="com_movie_img">
                <img :src="item.cover.origin" @click="send_id(item.id)" />
                <div class="com_movie_title">
                  <div class="com_title">
                    <span>{{item.name}}</span>
                  </div>
                </div>
              </div>
              <div class="com_date">
                <span>
									{{format(item.premiereAt)}}上映
								</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!--即将上映电影结束-->
      <!--更多-->
      <div class="more_button">
        <router-link to="details/coming_play" >更多即将上映电影</router-link>
      </div>
      <!--更多-->
    </div>
  </div>
</div>
</template>

<script>
//js
//引入axios插件
import axios from "axios";
export default {

  created: function() {
    //当index被引入渲染时，就开始发起请求
    var that = this;
    //多个重复请求
    function getUserAccount() {
      return axios.get('https://m.maizuo.com/v4/api/film/now-playing');
    }

    function getUserPermissions() {
      return axios.get('http://m.maizuo.com/v4/api/film/coming-soon?count=5&page=1');
    }
    axios.all([getUserAccount(), getUserPermissions()])
      .then(axios.spread(function(res, perms) {
        for (var i = 0; i < res.data.data.films.length; i++) {
          that.com_all.push(perms.data.data.films[i])
          that.now_all.push(res.data.data.films[i])
        }
      }));
  },
  data: function() {
    return {
      //即将上映
      com_all: [],
      //热映
      now_all: [],
    }
  },
  methods: {
    format: function(time) {
      var time = new Date(time);
      return time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate();
    },
    send_id: function(id) {
      this.$router.push({
        path: "/film_info",
        query: {
          my_id: id
        }
      })
    },
  }
}
</script>

<style lang="scss">
/*lang="scss" 识别成scss*/
/*引入其他的scss*/

@import "../scss/index.scss";
/*css*/
</style>
